<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>设置默认子路由</title>
	<!--引入Vue库-->
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
</head>
<body>	
<div id="app">
    <p>
      <router-link to="/">主页</router-link>
      <router-link to="/productDetails">商品详情</router-link>
      <router-link to="/shoppingCart">购物车</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    const Home = { template: '<div>打开网站主页</div>' }
    const ProductDetails = { template:`
      <div>
        <p>
          <router-link to="/productDetails">商品1</router-link>
          <router-link to="/productDetails/product2">商品2</router-link>
          <router-link to="/productDetails/product3">商品3</router-link>  
        </p>
        <router-view></router-view>
      </div>
      ` }
    const ShoppingCart = { template: '<div>打开购物车页面</div>' }
    const Product1 = { template: '<div>打开商品1详情页面</div>' }
    const Product2 = { template: '<div>打开商品2详情页面</div>' }
    const Product3 = { template: '<div>打开商品3详情页面</div>' }

    const routes = [
        { path: '/', component: Home },
        { path: '/productDetails', component: ProductDetails,
          children:[
                { path:'',component:Product1 },
                { path:'product2',component:Product2 },
                { path:'product3',component:Product3 },
              ]
          },
        { path: '/shoppingCart', component: ShoppingCart },
        { path: '*', redirect: "/"},
       ]
    const router = new VueRouter({
          routes 
        })
    const vm= new Vue({
          el:'#app',
          router
        })	  
</script>
</body>
</html>
